<template>
  <div>
    <h2>文章编辑</h2>
    <el-form label-width="80px">
      <el-form-item label="文章标题">
        <el-input placeholder="请输入标题" v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="文章摘要">
        <el-input type="textarea" v-model="formData.abstract" placeholder="请输入摘要"></el-input>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select
            v-model="formData.sortTagIds"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择文章分类">
          <el-option v-for="(tag, index) in existingTags" :key="tag.id" :label="tag.tag_name" :value="tag.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <v-md-editor
        v-model="formData.content"
        height="800px"
        :disabled-menus="[]"
        @upload-image="handleUploadImage"></v-md-editor>
    <el-button type="primary" @click="onSubmit">保存提交</el-button>
    <el-button type="danger" @click="getSth">getSth</el-button>
  </div>
</template>

<script>
import * as blogRequest from '@/network/blog'
export default {
  name: "BlogEditorPage",
  components:{
  },
  props:{
  },
  data(){
    return {
      formData: {
        title: "",
        abstract:"",
        content: "",
        sortTagIds: []
      },
      existingTags: null,
      hasArticle: false,
      currentArticleId: null
    }
  },
  mounted() {
  },
  activated() {
    console.log("activated");
    this.initEditorData();
  },
  methods: {
    // 图片上传相关
    handleUploadImage(event, insertImage, files){
      let forms = new FormData()
      forms.append('file',files[0]);
      forms.append('remark', "123");
      blogRequest.postFiles(forms)
      .then(res=>{
        console.log(res);
        // 此处只做示例
        insertImage({
          url:
              res['file'],
          desc: '请输入描述',
          width: 'auto',
          height: 'auto',
        });
      });
    },
    initEditorData(){
      // 如果是已有文章进行编辑
      if (this.$route.params.article_id !== undefined){
        this.hasArticle = true;
        this.currentArticleId = this.$route.params.article_id;
        blogRequest.getArticle(this.currentArticleId)
        .then(res=>{
          console.log(res)
          this.formData.title = res['article_title'];
          this.formData.abstract = res['article_abstract']
          this.formData.sortTagIds=[]
          for(let each of res['article_tags']){
            this.formData.sortTagIds.push(each.id)
          }
          this.formData.content = res['article_content']
        })
      }
      else{
        this.hasArticle = false;
        this.clearEditor();
        console.log("null")
      }
      this.initSortTags();
    },
    initSortTags(){
      blogRequest.getSortTags().then(res=>{
        this.existingTags = res;
      })
    },
    clearEditor(){
      this.formData.content = "";
      this.formData.contentHtml = "";
      this.formData.abstract = "";
      this.formData.title = "";
      this.formData.sortTagIds = [];
    },
    onSubmit(){
      if (this.hasArticle){
        blogRequest.putArticle(this.currentArticleId,this.formData.title,this.formData.abstract, this.formData.content)
        .then(res=>{
          console.log(res)
          blogRequest.articleChangeTags(res['id'], this.formData.sortTagIds)
              .then(res=>{
                console.log("add tag res:", res);
                alert("文章上传成功");
              })
        })
      }
      else {
        blogRequest.postArticles(this.formData.title, this.formData.abstract, this.formData.content)
          .then(res => {
            console.log(res)
            blogRequest.articleChangeTags(res['id'], this.formData.sortTagIds)
              .then(res=>{
                console.log("add tag res:", res);
                this.$router.push('/article_edit/'+res['id']+'/');
                alert("文章保存成功");
              })
          });
      }

    },
    getSth(){
      console.log(this.formData.sortTagIds)
    }
  }
}
</script>

<style scoped>

</style>
